<template>
    <div class="bount-page">
        <van-image class="bount-page-bg" :src="require('../assets/image/my-bg.png')"></van-image>
        
        <van-list 
            v-if="list.length>0"
            :finished="finished"
            v-model="loading"							 
            :error.sync="error" 
            :offset="50"
            :immediate-check="false"
            :finished-text="$i18n.t('default.other.noMore')"
            :error-text="$i18n.t('default.other.errorTip')"
            @load="onLoad"	
            class="content"		
        >
        
            <div class="box" v-for="(item,index) in list" :key="index">
                <div class="top">
                    <div class="title value">
                        <van-image class="img" :src="require('../assets/image/bouns.png')"></van-image>
                        <div>{{  $i18n.t('default.bount.period') }}:{{item.periodName}}</div>
                    </div>
                    <div class="time">{{  $i18n.t('default.bount.startTime') }}: {{item.periodStartDate}}</div>
                    <div class="time">{{  $i18n.t('default.bount.endTime') }}: {{item.periodEndDate}}</div>
                </div>
                <div class="box-bottom">
                    <div @click="gotoBountDetail(item)" class="state yjj">{{  $i18n.t('default.bount.viewDetail') }}</div>
                </div>
            </div>
            
        </van-list>
        <v-navBar></v-navBar>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                list: [
                    
                ],
                page: 1,
                limit: 10,
                error: false,
                finished: false,
                loading: false,
            }
        },
        mounted () {
            this.getList()
        },
        created(){
            this.$store.commit('setNavBarNum',1); 
        },
        methods: {
            onLoad () {
                this.getList()
            },
            getList () {
                this.$api.get('/period/list',{
                    
                }).then(res => {
                    this.list = res.data;
                    // if (res.code == 200) {
                    //     if (res.data.list.length > 0) {
                    //         this.list = this.list.concat(res.data.list)
                    //         this.page += 1
                    //     } else {
                    //         this.finished = true
                    //     }       
                    //     this.loading = false
                    // } else {
                    //     this.error = true
                    // }
                })
            },
            gotoBountDetail(item){
                this.$router.push({path:'/bountDetail',query:{periodId:item.periodName}})
            },
            formatDate (date) {
                let time = new Date(date)
                let y = time.getFullYear()
                let m = time.getMonth() + 1
                let d = time.getDate()
                let h = time.getHours()
                let mm = time.getMinutes()
                let s = time.getSeconds()
                return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
            },
        }
    }
</script>

<style lang="scss" scoped>
.bount-page{
    min-height: 100vh;
    padding:.3rem;
    position: relative;
    .bount-page-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .content{
        position: relative;
        z-index: 1;
        .box{
            height: 3.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #fff;
            padding: .39rem .35rem .41rem;
            margin-bottom: .3rem;
            border-radius: .05rem;
            border: 1px solid #755936;
            .title{
                display: flex;
                align-items: center;
                font-size: .28rem;
                font-weight: 500;
                color: #333333;
            }
            .img{
                width: .32rem;
                height: .32rem;
                margin-right: .13rem;
            }
            .time{
                font-size: .28rem;
                color: #646464;
                margin-top: .23rem;
                // line-height: 0.72rem;
            }
        }
    }
}
</style>